<template>
  <div class="wrapper">
    <div style="display: flex; justify-content: space-between; margin: 12px 0">
      <a-space>
        <a-button class="btnBox" @click="askList">查询未解答咨询</a-button>
        <a-button class="btnBox" @click="askList2">查询已解答答咨询</a-button>
      </a-space>
      <a-button class="btnBox" @click="userAsk" type="primary">咨询</a-button>
    </div>

    <div class="itemBox">
      <div style="display: flex; flex-wrap: wrap; gap: 4px">
        <template v-for="(item, index) in data" :key="item.id">
          <a-card :style="{ width: '280px' }" title="咨询">
            <template #extra>
              <a-link
                v-if="item.state == 0"
                @click="toRaiseAsk(item.id)"
                :style="{ color: item.isUrgency ? 'red' : 'skyblue' }"
              >
                进行解答
              </a-link>
            </template>
            <div style="overflow: hidden">问题描述：{{ item.information }}</div>
            <div v-if="item.reply">问题解答：{{ item.reply }}</div>
            <div>是否加急：{{ item.isUrgency === 0 ? "不需要" : "需要" }}</div>
            <div>电话号码：{{ item.phone || "暂时未提供" }}</div>
          </a-card>
        </template>
      </div>
    </div>

    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title> 用户咨询 </template>
      <a-textarea
        v-model="propsUserAsk.information"
        placeholder="输入问题内容"
        allow-clear
      />
      <a-checkbox v-model="isUrgencyRef">是否加急</a-checkbox>
    </a-modal>
    <a-modal v-model:visible="visible2" @ok="handleOk2" @cancel="handleCancel2">
      <template #title> 专家解答 </template>
      <a-textarea
        v-model="propsRais.reply"
        placeholder="输入解答内容"
        allow-clear
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import comment from "@/components/common/comment/index.vue";
import modal from "@/components/common/modal/index.vue";
import { commonRequest } from "@/utils/request";
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";
import CardOld from "./CardOld.vue";
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from "@arco-design/web-vue/es/icon";
import { getUserAsk, getAskList, getHighAsk } from "@/apis/oldman";

const askSate = ref(0);
const data = ref();
const isUrgencyRef = ref();

const propsRais = ref({
  id: "", //资讯数据的id
  reply: "",
});
const propsUserAsk = ref({
  information: "",
  isUrgency: 0,
});
const visible = ref(false);
const visible2 = ref(false);

const handleOk = () => {
  const data = {
    ...propsUserAsk.value,
    isUrgency: isUrgencyRef.value ? 1 : 0,
  };
  getUserAsk(data)
    .then((res) => {
      askList();
    })
    .catch((err) => {
      console.log(err, "resres");
    });
  propsUserAsk.value = {
    information: "",
    isUrgency: 0,
  };
  visible.value = false;
};
const handleOk2 = () => {
  getHighAsk(propsRais.value).then((res) => {
    if (res.data.code === 500) {
      Message.warning(res.data.message);
      return;
    }
    askList();
  });
  propsRais.value = {
    id: "", //资讯数据的id
    reply: "",
  };
  visible2.value = false;
};

const handleCancel = () => {
  propsUserAsk.value = {
    information: "",
    isUrgency: 0,
  };
  visible.value = false;
};
const handleCancel2 = () => {
  propsRais.value = {
    id: "", //资讯数据的id
    reply: "",
  };
  visible2.value = false;
};

const toRaiseAsk = (e) => {
  propsRais.value.id = e;
  visible2.value = true;
};

const askList = () => {
  getAskList({ state: askSate.value }).then((res) => {
    data.value = res.data.data;
  });
};
const askList2 = () => {
  getAskList({ state: 1 }).then((res) => {
    data.value = res.data.data;
  });
};

const userAsk = () => {
  visible.value = true;
  // getUserAsk(propsUserAsk.value)
};

onMounted(() => {
  askList();
});
</script>

<style scoped>
.wrapper {
  height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header {
  display: flex;
  gap: 24px;
  padding: 24px;
}

.body {
  margin: 8px 24px;
  overflow-y: auto;
}

.sub-wrapper {
  min-height: 300px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sub-footer {
  display: flex;
  gap: 8px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}

.newOld {
  margin-left: auto;
  margin-right: 120px;
}

.boxList {
  border: 1px solid black;
  padding: 10px;
}

.itemBox {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
}

.Fbtn {
  display: flex;
  margin-bottom: 20px;
}

.btnBox {
  width: 150px;
  margin-right: 20px;
}
</style>
